<template>
  <div class="all-content">
    <BreadList :breadList="breadList"></BreadList>
    <div class="manage-content"
      v-loading="listLoading"
      element-loading-text="加载中"
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0, 0, 0, 0.5)">
      <div class="search-content two">
        <!-- <div class="search-item first">
          <span class="search-label">模型</span>
          <el-select 
            v-model="searchParams.model"
            placeholder="请选择模型"
            class="item-select">
            <el-option
              v-for="item in modelList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label">数据集</span>
          <el-select 
            v-model="searchParams.dataSet"
            placeholder="请选择数据集"
            class="item-select">
            <el-option
              v-for="item in dataSetList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div> -->
        <div class="search-item featBack">
          <span class="search-label">是否成案反馈</span>
          <el-select 
            v-model="searchParams.feedback"
            placeholder="请选择成案反馈"
            class="item-select">
            <el-option
              v-for="item in feedbackList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label">线索集种类</span>
          <el-select 
            v-model="searchParams.clueType"
            placeholder="请选择成案反馈"
            class="item-select">
            <el-option
              v-for="item in clueTypeList"
              :key="item.code"
              :label="item.name"
              :value="item.code">
            </el-option>
          </el-select>
        </div>
        <div class="search-item">
          <span class="search-label">推送时间</span>
          <el-date-picker
            class="item-select"
            v-model="searchParams.time"
            value-format="timestamp"
            type="daterange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
          </el-date-picker>
        </div>
        <el-button class="search-btn" type="primary" @click="getTableList(1, true)">搜索</el-button>
        <el-button class="search-btn no-left" @click="clearSearch">重置</el-button>
      </div>
      <div class="table-content">
        <div class="list" v-show="tableData.length > 0">
          <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%;height: 100%"
            height="100%">
            <el-table-column
              label="序号"
              type="index"
              width="68">
              <template slot-scope="scope">
                <span>{{(tablePageData.currentPage - 1) * tablePageData.pageSize + scope.$index + 1}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="name"
              label="线索集名称"
              min-width="150">
              <template slot-scope="scope">
                <!-- <el-tooltip :content="scope.row.name" placement="top"> -->
                  <span class="desc-style">{{scope.row.name}}</span>
                <!-- </el-tooltip> -->
              </template>
            </el-table-column>
            <el-table-column
              prop="newPushNum"
              label="新推送线索"
              min-width="120">
              <template slot-scope="scope">
                <span :class="{'red': scope.row.newPushNum && scope.row.newPushNum > 0}">{{scope.row.newPushNum}}</span>
              </template>
            </el-table-column>
            <el-table-column
              prop="totalClueNum"
              label="总线索数"
              min-width="110">
            </el-table-column>
            <!-- <el-table-column
              prop="modelName"
              label="模型">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.modelName" placement="top">
                  <span class="desc-style">{{scope.row.modelName}}</span>
                </el-tooltip>
              </template>
            </el-table-column>
            <el-table-column
              label="数据集">
              <template slot-scope="scope">
                <el-tooltip :content="scope.row.datasetName" placement="top">
                  <span class="desc-style">{{scope.row.datasetName}}</span>
                </el-tooltip>
              </template>
            </el-table-column> -->
            <el-table-column
              prop="clueType"
              :formatter="clueTypeFormat"
              label="线索种类"
              min-width="150">
            </el-table-column>
            <el-table-column
              prop="updateTime"
              label="更新时间"
              :formatter="dateFormat"
              min-width="200">
            </el-table-column>
            <el-table-column
              label="操作"
              width="247">
              <template slot-scope="scope">
                <span v-if="buttonList.some(item => item.value === '/ClueManageInquisitor/manage')" class="operate-item" @click="itemManage(scope.row)"><span class="icon icon-manage"></span>管理</span>
                <span v-if="scope.row.type !== 1 && !scope.row.evaluationResult && buttonList.some(item => item.value === '/ClueManageInquisitor/feedback')" class="operate-item" @click="itemFeedback(scope.row)"><span class="icon icon-feedback"></span>成案反馈</span>
                <!-- 已反馈 -->
                <span v-if="scope.row.type !== 1 && scope.row.evaluationResult && buttonList.some(item => item.value === '/ClueManageInquisitor/feedback')" class="operate-item disabled"><span class="icon icon-feedback"></span>{{ feedbackFormat(scope.row.evaluationResult) }}</span>
              </template>
            </el-table-column>
          </el-table>
        </div>
        <div class="page-box" v-show="tableData.length > 0">
          <el-pagination
            class="table-page"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="total, sizes, slot, prev, pager, next"
            :total="tablePageData.total">
            <span class="page-item first" @click="handleCurrentChange(1)">首页</span>
          </el-pagination>
          <el-pagination
            class="table-page"
            @current-change="handleCurrentChange"
            :current-page="tablePageData.currentPage"
            :page-sizes="tablePageData.pageSizes"
            :page-size="tablePageData.pageSize"
            background
            layout="slot"
            :total="tablePageData.total">
            <span class="page-item" @click="handleCurrentChange(Math.ceil(tablePageData.total/tablePageData.pageSize))">末页</span>
            <span class="page-jumper">跳至<el-input class="page-num" v-model="tablePageData.inputNum" @input.native="tablePageData.inputNum = JSON.stringify(tablePageData.inputNum).replace(/[^0-9]/g,'')" @blur="handleCurrentChange(tablePageData.inputNum)" @keyup.enter.native="handleCurrentChange(tablePageData.inputNum)"></el-input>页</span>
          </el-pagination>
        </div>
        <Empty v-show="tableData.length === 0" imgHeight="42%" />
      </div>
      <el-dialog
        title="成案反馈"
        v-if="feedbackModelShow"
        :visible.sync="feedbackModelShow"
        :close-on-click-modal="false"
        :close-on-press-escape="false"
        :append-to-body="false"
        width="480px"
        custom-class="detail-dialog"
        >
          <Feedback ref="feedback" @feedbackDown="feedbackDown"></Feedback>
          <span slot="footer" class="dialog-footer">
            <el-button type="primary" @click="feedbackSure">确定</el-button>
            <el-button @click="feedbackModelShow = false">取消</el-button>
          </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import Empty from '../../components/empty';
  import Feedback from '../../components/feedback';
  import { ClueResource } from '../../axios/index';
  import { mapActions, mapGetters } from 'vuex';
  import { formatDate } from '../../util/util';
  import BreadList from '../../components/breadList';
  export default {
    name: 'ClueMangeInquisitor',
    components: {
      Empty,
      Feedback,
      BreadList
    },
    data() {
      return {
        // 搜索条件
        searchParams: {
          model: 0,
          dataSet: 0,
          time: [],
          feedback: 0,
          clueType: 0
        },
        oldSearchParams: {
          model: 0,
          dataSet: 0,
          time: [],
          feedback: 0,
          clueType: 0
        },
        // 表格相关
        listLoading: false,
        tableData: [],
        tablePageData: {
          currentPage: 1,
          pageSize: 10,
          total: 0,
          pageSizes: [10, 20, 50],
          inputNum: 1
        },
        // 模型列表
        modelList: [
          {
            name: '全部',
            code: 0
          },
          {
            name: '减刑假释模型',
            code: 1
          }
        ],
        // 数据集列表
        dataSetList: [
          {
            name: '全部',
            code: 0
          },
          {
            name: '减刑假释数据集模型',
            code: 1
          }
        ],
        // 是否成案反馈
        feedbackList: [
          
          {
            name: '全部',
            code: 0
          },
          {
            name: '成案',
            code: 1
          },
          {
            name: '调查',
            code: 2
          },
          {
            name: '放弃',
            code: 3
          }
        ],
        // 线索集种类
        clueTypeList: [
          {
            name: '全部',
            code: 0
          },
          {
            name: '推送',
            code: 1
          },
          {
            name: '自建',
            code: 2
          }
        ],
        // 成案反馈
        feedbackModelShow: false,
        activeClue: null,
        // 面包屑列表
        breadList: [
          {
            modelName: 'ClueMangeInquisitor',
            name: '线索管理'
          }
        ]
      }
    },
    mounted() {
      this.getTableList();
    },
    methods: {...mapActions([
        'setActiveItem'
      ]),
      // 线索种类格式化
      clueTypeFormat(row) {
        switch(row.clueType){
          case 1:
            return '推送'
          case 2:
            return '自建'
          default:
            return ''
        }
      },
      // 成案反馈格式化
      feedbackFormat(evaluationResult) {
        switch(evaluationResult){
          case 1:
            return '成案'
          case 2:
            return '调查'
          case 3:
            return '放弃'
          default:
            return ''
        }
      },
      // 时间格式化
      dateFormat(row) {
        return formatDate(row.updateTime, 'yyyy年mm月dd日 hh:MM');
      },
      // 获取列表数据
      getTableList(page, record) {
        if(page) {
          this.tablePageData.currentPage = page;
          this.tablePageData.inputNum = page;
        }
        if(record) {
          this.oldSearchParams = JSON.parse(JSON.stringify(this.searchParams));
        }
        let returnTrue = false;
        setTimeout(() => {
          if(!returnTrue) {
            this.listLoading = true;
          }
        }, 100)
        ClueResource
        .inquisitorPage({
          rybm: this.userInfo.rybm,
          pageNo: this.tablePageData.currentPage,
          pageSize: this.tablePageData.pageSize,
          evaluationResult: this.searchParams.feedback,
          clueType: this.searchParams.clueType,
          pushStartTime: this.searchParams.time && this.searchParams.time.length > 0 ? this.searchParams.time[0] : null,
          pushEndTime: this.searchParams.time && this.searchParams.time.length > 0 ? this.searchParams.time[1] : null
        })
        .then(res => {
          returnTrue = true;
          this.listLoading = false;
          if(res && res.data) {
            this.tablePageData.total = parseInt(res.data.total);
            if(res.data.records) {
              this.tableData = res.data.records;
            }
          }
        })
        .catch(() => {
          returnTrue = true;
          this.listLoading = false;
        })
      },
      // 改变每页size
      handleSizeChange(val) {
        this.tablePageData.pageSize = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList(1)
      },
      // 切页
      handleCurrentChange(val) {
        val = parseInt(val);
        if(!val || val <= 0) {
          val = 1;
        }
        else if(val > Math.ceil(this.tablePageData.total / this.tablePageData.pageSize)) {
          val = Math.ceil(this.tablePageData.total / this.tablePageData.pageSize);
        }
        this.tablePageData.inputNum = val;
        if(val === this.tablePageData.currentPage) {
          return
        }
        this.tablePageData.currentPage = val;
        this.searchParams = JSON.parse(JSON.stringify(this.oldSearchParams));
        this.getTableList();
      },
      // 重置
      clearSearch() {
        this.searchParams = {
          model: 0,
          dataSet: 0,
          time: [],
          feedback: 0,
          clueType: 0
        }
        this.getTableList(1, true);
      },
      // 管理
      itemManage(item) {
        this.setActiveItem({
          data: true,
          collectionId: item.id,
          taskId: item.taskId,
          collectionName: item.name
        })
        if(item.type === 1) {
          this.$router.push({path:'/PushClueOverview'})
        }
        else {
          this.$router.push({path:'/clueSet'});
        }
      },
      // 成案反馈
      itemFeedback(item) {
        this.activeClue = item.id;
        this.feedbackModelShow = true;
      },
      // 成案反馈确认
      feedbackDown(data) {
        let params = ''
        if (data.evaluationResult === 1) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            ajmc: data.ajmc,
            bmsah: data.bmsah,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 2) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            rybm: this.userInfo.rybm
          }
        } else if (data.evaluationResult === 3) {
          params = {
            id: this.activeClue,
            evaluationResult: data.evaluationResult,
            info: data.info,
            rybm: this.userInfo.rybm
          }
        }
        ClueResource
        .inquisitorFeedback(params)
        .then(res => {
          this.$message.success('成案反馈成功')
          this.getTableList();
          this.feedbackModelShow = false;
        })
      },
      feedbackSure() {
        this.$refs.feedback.feedbackDown();
      },
    },
    computed: {
      ...mapGetters({
        userInfo: "getUserInfo",
        buttonList: "getButtonPermissions"
      })
    }
  }
</script>

<style scoped lang="scss">
  .all-content {
    width: 100%;
    height: 100%;
  }
  .manage-content {
    width: 100%;
    height: calc(100% - 32px);
    padding: 0 24px;
    background-color: #fff;
    .search-item.featBack {
      .search-label {
        text-align: left;
      }
    }
  }
</style>
